<template>
   <div class="banner-box">
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
    <van-swipe-item v-for="(img,index) in bannerimg" :key="index">
      <img :src="img.img" >
    </van-swipe-item>
   </van-swipe>
</div>
</template>

<script>
import axios from 'axios'
export default {
   name:"banner-vue",
   data(){
      return {
        bannerimg:[]
      }
   },
   mounted(){
     
  },
  created(){
    axios({
      method:"get",
      url:"/api/banner/list"
    })
    .then(resolve=>{
      this.bannerimg = resolve.data.data;
    })
  }
}
</script>
<style scoped>
 .banner-box{
   width: 100%;
   height: 150px;
   background-color: orange;
   border-radius: .75rem;
   margin:.5rem 0px;
 }
 .my-swipe{
  height: 7.5rem;
  border-radius: .5rem;
 }
.my-swipe img{
   width: 100%;
   height: 100%;
 }
 .my-swipe .van-swipe-item {
    color: #fff;
    font-size: 20px;
    line-height: 150px;
    text-align: center;
    background-color: #39a9ed;
  }
</style>